<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="sum/_static/libmcs-favicon.ico"/>
        <title>LibmCS Documentation Resources</title>
        <style>
        /* Style the tab */
        .tab {
            float: left;
            background-color: #343131;
            width: 12%;
            height: 100%;
        }

        /* Style the buttons that are used to open the tab content */
        .tab button {
            display: block;
            width: 100%;
            text-align: left;
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 13.5px 16px;
            font-weight: bold;
            color: #d9d9d9;
            font-size: 90%;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
            color: #343131;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #c9c9c9;
            color: #343131;
        }

        /* Style the tab content */
        .tabcontent {
            float: left;
            display: none;
            width: 88%;
            height: 100%;
        }

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        * {
            font-family: Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;
            font-size: 16px;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }
        </style>
    </head>
    <body>
         <!-- Tab links -->
         <div class="tab">
             <button class="tablinks" id="defaultOpen" onclick="selectTab(event, 'Readme')">LibmCS Readme</button>
             <button class="tablinks" onclick="selectTab(event, 'SUM')">Software User Manual</button>
             <button class="tablinks" onclick="selectTab(event, 'SDD')">Software Design Document</button>
         </div>

         <!-- Tab content -->
         <div id="Readme" class="tabcontent">
             <iframe src="README.html"></iframe>
         </div>

         <div id="SUM" class="tabcontent">
             <iframe src="sum"></iframe>
         </div>

         <div id="SDD" class="tabcontent">
             <iframe src="sdd"></iframe>
         </div>

         <script>
             function selectTab(evt, tabName) {
                 // Declare all variables
                 var i, tabcontent, tablinks;

                 // Get all elements with class="tabcontent" and hide them
                 tabcontent = document.getElementsByClassName("tabcontent");
                 for (i = 0; i < tabcontent.length; i++) {
                     tabcontent[i].style.display = "none";
                 }

                 // Get all elements with class="tablinks" and remove the class "active"
                 tablinks = document.getElementsByClassName("tablinks");
                 for (i = 0; i < tablinks.length; i++) {
                     tablinks[i].className = tablinks[i].className.replace(" active", "");
                 }

                 // Show the current tab, and add an "active" class to the button that opened the tab
                 document.getElementById(tabName).style.display = "block";
                 evt.currentTarget.className += " active";
             }

             document.getElementById("defaultOpen").click();
         </script>
    </body>
</html>
